<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>PDF查看器</title>
    <!-- 引入pdf.js库 -->
    <script src="/js/pdf.min.js"></script>
    <link href="/css/font-awesome.min.css" rel="stylesheet">
    <script>
        // 配置pdf.js路径
        const pdfjsLib = window['pdfjs-dist/build/pdf'];
        pdfjsLib.GlobalWorkerOptions.workerSrc = '/js/pdf.worker.min.js';
    </script>
    <style>
        body, html {
            margin: 0;
            padding: 0;
            height: 100%;
            overflow: hidden;
            font-family: Arial, sans-serif;
        }
        .pdf-container {
            display: flex;
            flex-direction: column;
            height: 100%;
        }
        .toolbar {
            background-color: #f5f5f5;
            border-bottom: 1px solid #ddd;
            padding: 8px 16px;
            display: flex;
            align-items: center;
            gap: 10px;
        }
        .toolbar button {
            background-color: #4CAF50;
            border: none;
            color: white;
            padding: 8px 12px;
            text-align: center;
            text-decoration: none;
            display: inline-block;
            font-size: 14px;
            margin: 4px 2px;
            cursor: pointer;
            border-radius: 4px;
        }
        .toolbar button:hover {
            background-color: #45a049;
        }
        .toolbar input {
            padding: 6px;
            width: 50px;
            text-align: center;
            border: 1px solid #ddd;
            border-radius: 4px;
        }
        .toolbar span {
            margin: 0 5px;
        }
        .pdf-viewer {
            flex: 1;
            overflow: auto;
            display: flex;
            justify-content: center;
            padding: 20px;
            background-color: #f9f9f9;
        }
        .page-canvas {
            margin-bottom: 20px;
            box-shadow: 0 0 5px rgba(0,0,0,0.2);
            background-color: white;
        }
    </style>
</head>
<body>
    <div class="pdf-container">
        <div class="toolbar">
            <button id="prev-page"><i class="fa fa-arrow-left"></i> 上一页</button>
            <button id="next-page">下一页 <i class="fa fa-arrow-right"></i></button>
            <span>第 </span>
            <input type="number" id="page-num" min="1" value="1">
            <span> 页，共 <span id="page-count">?</span> 页</span>
            <button id="zoom-in"><i class="fa fa-search-plus"></i> 放大</button>
            <button id="zoom-out"><i class="fa fa-search-minus"></i> 缩小</button>
            <button id="download"><i class="fa fa-download"></i> 下载</button>
        </div>
        <div class="pdf-viewer" id="viewer"></div>
    </div>

    <script>

        const dpr = window.devicePixelRatio || 1;
        // 获取URL参数
        const urlParams = new URLSearchParams(window.location.search);
        const pdfUrl = urlParams.get('pdfUrl');
        
        if (!pdfUrl) {
            document.getElementById('viewer').innerHTML = '<div style="color: red; padding: 20px;">错误：未提供PDF URL</div>';
            throw new Error('未提供PDF URL');
        }

        // PDF渲染相关变量
        let pdfDoc = null;
        let pageNum = 1;
        let pageRendering = false;
        let pageNumPending = null;
        let scale = 1;
        const viewer = document.getElementById('viewer');
        const pageCount = document.getElementById('page-count');
        const pageNumInput = document.getElementById('page-num');

        // 渲染指定页面
        function renderPage(num) {
            pageRendering = true;
            
            // 清除现有内容
            viewer.innerHTML = '';
            
            // 加载指定页面
            pdfDoc.getPage(num).then(function(page) {
                const viewport = page.getViewport({ scale: scale });
                
                // 创建canvas元素
                const canvas = document.createElement('canvas');
                canvas.className = 'page-canvas';
                const context = canvas.getContext('2d');
                canvas.height = viewport.height * dpr;
                canvas.width = viewport.width * dpr;
                // 设置 CSS 尺寸（控制显示大小）
                canvas.style.width = `${viewport.width}px`;
                canvas.style.height = `${viewport.height}px`;

                // 设置 Canvas 内部尺寸（控制渲染质量）
                canvas.width = viewport.width * dpr;
                canvas.height = viewport.height * dpr;

                // 调整上下文缩放以匹配设备像素比
                context.scale(dpr, dpr);
                // 添加到视图
                viewer.appendChild(canvas);
                
                // 渲染PDF页面到canvas
                const renderContext = {
                    canvasContext: context,
                    viewport: viewport
                };
                
                const renderTask = page.render(renderContext);
                
                // 渲染完成后处理
                renderTask.promise.then(function() {
                    pageRendering = false;
                    if (pageNumPending !== null) {
                        // 处理待渲染的页面
                        renderPage(pageNumPending);
                        pageNumPending = null;
                    }
                    
                    // 更新页面输入框
                    pageNumInput.value = num;
                });
            });
            
            // 更新页面计数器
            document.getElementById('page-num').value = num;
        }

        // 队列渲染页面
        function queueRenderPage(num) {
            if (pageRendering) {
                pageNumPending = num;
            } else {
                renderPage(num);
            }
        }

        // 跳转到上一页
        function onPrevPage() {
            if (pageNum <= 1) {
                return;
            }
            pageNum--;
            queueRenderPage(pageNum);
        }

        // 跳转到下一页
        function onNextPage() {
            if (pageNum >= pdfDoc.numPages) {
                return;
            }
            pageNum++;
            queueRenderPage(pageNum);
        }

        // 放大
        function onZoomIn() {
            scale *= 1.2;
            queueRenderPage(pageNum);
        }

        // 缩小
        function onZoomOut() {
            scale /= 1.2;
            queueRenderPage(pageNum);
        }

        // 下载PDF
        function onDownload() {
            const link = document.createElement('a');
            link.href = pdfUrl;
            link.download = 'document.pdf';
            link.click();
        }

        // 事件监听器
        document.getElementById('prev-page').addEventListener('click', onPrevPage);
        document.getElementById('next-page').addEventListener('click', onNextPage);
        document.getElementById('zoom-in').addEventListener('click', onZoomIn);
        document.getElementById('zoom-out').addEventListener('click', onZoomOut);
        document.getElementById('download').addEventListener('click', onDownload);
        
        pageNumInput.addEventListener('change', function() {
            const val = parseInt(this.value, 10);
            if (!isNaN(val) && val > 0 && val <= pdfDoc.numPages) {
                pageNum = val;
                queueRenderPage(pageNum);
            } else {
                this.value = pageNum;
            }
        });

        // 加载PDF文件
        pdfjsLib.getDocument(pdfUrl).promise.then(function(pdfDoc_) {
            pdfDoc = pdfDoc_;
            pageCount.textContent = pdfDoc.numPages;
            
            // 渲染第一页
            renderPage(pageNum);
        }).catch(function(error) {
            console.error('加载PDF时出错:', error);
            viewer.innerHTML = `<div style="color: red; padding: 20px;">错误：无法加载PDF文件。错误详情: ${error.message}</div>`;
        });
    </script>
</body>
</html>
    